<!doctype html>
<html lang="en">
<head>
	<title>Upload - File Input</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="Overview" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	<link href="../base-reset.css" rel="stylesheet" type="text/css" />
	<link href="../../themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />
	<link href="../demos-single.css" rel="stylesheet" type="text/css" />
	<link href="../../themes/wijmo/jquery.wijmo-open.2.3.2.css" rel="stylesheet" type="text/css" />
	<link href="../../themes/wijmo/jquery.wijmo.wijupload.css" rel="stylesheet" type="text/css" />
	<script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
	<style type="text/css">
	.Loading
	{
		width: 37px;
		height: 37px;
		background-image: url("../images/waiting.gif");
	}
	</style>
	<script id="script1" type="text/javascript">
	    var supportXhr;
	    $(document).ready(function () {
	        var progressbar = $("#progressbar");
	        var upload = $("#upload").wijupload({
	            change: function (e, data) {
	            },
	            upload: function (e, data) {
	            },
	            totalUpload: function () {
	                progressbar.show();
	            },
	            complete: function (e, data) {
	            },
	            totalComplete: function () {
	                progressbar.fadeOut(1500, function () {
	                    if (supportXhr) {
	                        $("#progressbar").wijprogressbar("option", "value", 0);
	                    }
	                });
	            },
	            totalProgress: function (e, data) {
	                if (supportXhr) {
	                    $("#progressbar").wijprogressbar("option", "maxValue", data.total);
	                    $("#progressbar").wijprogressbar("option", "value", data.loaded);
	                }
	            },
	            action: "http://localhost:2164/Main/Widgets/Wijmo-Complete/development-bundle/samples/upload/upload.ashx"
	        });
	        supportXhr = $("#upload").wijupload("supportXhr");
	        if (supportXhr) {
	            progressbar.wijprogressbar({ value: 0 });
	        } else {
	            progressbar.addClass("Loading");
	        }
	        progressbar.hide();
	    });
	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
				Overview</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->
            <input id="upload" type="file" multiple />

			<div id="progressbar"></div>
			<!-- End demo markup -->
			<div class="demo-options">
				<!-- Begin options markup -->
				<!-- End options markup -->
			</div>
		</div>
		<div class="footer demo-description">
        <p>
        The wijupload widget can replace file inputs in your web forms or exist as an asynchronous uploader. It support multiple files and can be hooked up with Ajax to display real-time upload progress.
        </p>
		</div>
	</div>
</body>
</html>
